<script setup lang="ts">

import { reactive } from 'vue'

let obj = reactive({
  name: '迪迦',
  age: 5
})
// console.log(obj) // 变成响应式之前
// 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性
// 意思就是 将使用reactive声明的引用数据类型 里面的数据 也变成响应式的。
// console.log(toRefs(obj).value) // 变成响应式之后 打印出来的是一个对象
// 当我们把引用数据类型变成响应式之后 需要使用.value来获取里面的属性 想要获取某个属性接着使用点语法
// console.log(toRefs(obj).value.name) // 使用点 语法 获取里面的属性值

// 但是上面的写法太长了 我们可以使用ES6的解构赋值来完成快速获取
// let { name, age } = toRefs(obj)
// console.log(name.value)
// console.log(age.value)
// 通过解构赋值的方式 快速获取响应式对象中的响应式数据


// 我们声明一个函数 来获取对象中的值 我们也是可以获取到的
function getVal() {
  console.log(obj.name)
  console.log(obj.age)
}


// 总结：使用toRefs将reactive声明的引用数据类型里面的数据 也转换成响应式数据
// 在书写JS代码的时候 我们使用结构赋值的操作快速获取对象里面的属性 获取值时需要带上.value属性
// 在模版中则不需要带上.value 直接使用obj.属性名即可

</script>

<template>

  <p>toRefs页面</p>
  <!--  我们使用toRefs后 在模版中不需要使用.value来渲染值了 直接使用点语法即可-->
  {{ obj.name }}--{{ obj.age }}
  <button @click="getVal">点击获取obj的值</button>

</template>

<style scoped>

</style>
